<template>
    <view class="container">
      <intake-nav-bar title="分润详情" dark :fixed="true" />
      <view class="_record">
        <scroll-view scroll-y="true" class="record-list" style="height:100vh ;" @scrolltolower="loadMore">
          <view v-for="(item, index) in list" :key="index" class="record-item">
            <view class="record-content">
              <view class="record-main">
                <view class="record-info">
                  <text class="card-number">{{item.month}}</text>
                </view>
                <text class="amount expense-text" >
                + {{item.manage_score}}
                </text>
              </view>
            </view>
          </view>
          <view class="empty" v-if="list.length === 0">
            <emptyPage title="暂无记录哦"></emptyPage>
          </view>
        </scroll-view>
      </view>
    </view>
  </template>
  
  <script>
  import {  getProfitsLists } from '@/api/user';
  import emptyPage from '@/components/emptyPage.vue';
  export default {
    components: {
    emptyPage,
  },
    data() {
      return {
        list: [], // 列表数据
        page: 1, // 当前页码
        pageSize: 10, // 每页数据量
        loading: false, // 是否正在加载
        noMore: false, // 是否没有更多数据
        CardList:[],
        recordsList:[],
        water_id:'',
        quilt_uid:'',
        emptyBox: this.$common.imgUrl() + '/images/empty-box.png',
      };
    },
    onLoad(query) {
      this.quilt_uid = query.quilt_uid
      this.water_id = query.water_id
      this.queryList()
    },
    methods: {
      async queryList() {
        if (this.loading || this.noMore) return;
        this.loading = true;
        const newData = await getProfitsLists(
          {
            page: this.page,
            water_id:this.water_id,
            quilt_uid:this.quilt_uid,
            pageSize: this.pageSize,
          })
        if (newData.data.data.length > 0) {
          this.list = this.list.concat(newData.data.data);
          this.page++;
        } else {
          this.noMore = true;
        }
  
        this.loading = false;
      },
       // 加载更多
       loadMore() {
        this.queryList();
      },
    }
  }
  </script>
  
  <style lang="scss">
  .container{
    background: url($baseUrl + '/images/bg/user_bg@2x.png') no-repeat center / 100% 100%;
    width: 100%;
    height: 100vh; /* 使用视口高度，确保元素高度充满整个屏幕 */
    //display: flex;
    justify-content: center;
    background-size: cover; /* 使背景图片覆盖整个元素 */
    padding: 0 30rpx;
    ._record {
      .record-list {
        flex: 1;
        overflow: auto;
        .record-item{
          display: flex;
          padding: 30rpx;
          background-color: #FFFFFF;
          margin-top: 20rpx;
          .record-icon {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;
            flex-shrink: 0;
          }
          .income {
            background-color: #FF4B4B;
          }
          .expense {
            background-color: #4080FF;
          }
          .record-content{
            flex: 1;
            .record-main {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              .record-info {
                flex: 1;
                margin-right: 20rpx;
                .card-number {
                  font-size: 14px;
                  color: #333333;
                  display: block;
                  margin-bottom: 8rpx;
                }
                .record-type {
                  font-size: 14px;
                  color: #666666;
                }
              }
              .amount {
                font-size: 16px;
                font-weight: 500;
              }
              .income-text {
                color: #FF4B33;
              }
  
              .expense-text {
                color: #3662EC;
              }
            }
            .record-detail {
              margin-top: 16rpx;
              .time {
                font-size: 12px;
                color: #999999;
                display: block;
              }
  
              .description {
                font-size: 12px;
                color: #666666;
                margin-top: 8rpx;
                display: block;
              }
            }
  
          }
        }
      }
      .empty{
        text-align: center;
        font-size: 28rpx;
      }
    }
  }
  </style>
  